<template>
  <html>
  <div>
    <el-container id="container">
      <el-header id="header">
        <span class="systemName">叮叮书城</span>
      </el-header>
      <el-main id="main">
        <el-card id="loginContain">
          <div id="tabs">
            <el-tabs>
              <el-tab-pane label="用户登录">
                <el-form ref="loginFormRef" :rules="FormRule" :model="loginFormData" label-width="0px"
                  class="login_form">
                  <el-form-item prop="username">
                    <el-input prefix-icon="iconfont iconyonghu" v-model="loginFormData.username" placeholder="用户名">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input prefix-icon="iconfont iconmima" type="password" v-model="loginFormData.password"
                      placeholder="密码">
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button id="TencentCaptchaBtn" size="medium" type="warning">验证</el-button>
                    <!-- <button id="TencentCaptchaBtn">普通验证</button> -->
                  </el-form-item>
                  <el-form-item>
                    <!--  @click="login" :disabled="loginBtnDisableFlag" -->
                    <el-button size="medium" :disabled=loginBtnDisableFlag type="success" @click="login">登录</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="用户注册">
                <el-form ref="loginFormRef" :rules="FormRule" :model="registFormData" label-width="0px"
                  class="login_form">
                  <el-form-item prop="username">
                    <el-input prefix-icon="iconfont iconyonghu" v-model="registFormData.username" placeholder="用户名">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input prefix-icon="iconfont iconmima" type="password" v-model="registFormData.password"
                      placeholder="密码">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="rePassword">
                    <el-input prefix-icon="iconfont iconmima" type="password" v-model="registFormData.rePassword"
                      placeholder="重复密码">
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button size="medium" type="primary">注册</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-main>
      <el-footer id="footer" style="height:50px">
        <span id="spanfooter" style="font-weight:100">叮叮网上书城©实训第四组</span>
      </el-footer>
    </el-container>
  </div>

  </html>
</template>
<script>

export default {
  data: function () {
    return {
      FormRule: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur' }
        ],
        rePassword: [
          { required: true, message: '请重复输入密码', trigger: 'blur' },
          { min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur' }
        ]
      },
      loginFormData: {
        appid: '2066570658',
        ticket: '',
        randstr: '',
        username: '',
        password: ''
      },
      registFormData: {
        username: '',
        password: '',
        rePassword: ''
      },
      loginBtnDisableFlag: true
    }
  },
  methods: {
    login: function () {
      // 表单基础验证
      /* this.$refs.loginFormRef.validate(async valid => {
        // 表单验证不通过
        if (!valid) {
          this.$message.error('请正确输入表单内容')
          return
        }
        // 表单验证通过，发起请求，获取result请求结果
        const result = await this.$axios({
          method: 'post', // 发送方式 查找使用get、添加使用post、更新使用put、删除使用delete
          url: '/admin/login', // 发送地址，前面的http等域名内容在main.js中配置
          data: this.loginFormData, // 发送数据
          // 拆解表单中的参数，只有登录请求需要这么做
          transformRequest: [
            function (data) {
              let ret = ''
              for (const it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              ret = ret.substring(0, ret.lastIndexOf('&'))
              return ret
            }
          ],
          // 设置表单提交的请求头
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        console.log(result.data)
        // 判断请求是否成功
        if (result.data.code === 200) {
          // 将用户ID存储到sessionStorage中，后期在商城中方便获取到个人信息等
          // window.sessionStorage中.setItem('userId', 获取到的result拆解出的userId，如result.data.data.userId)
          // this.$message.success('登录成功')
        }
      }) */
    }
  },
  created: function () {
    // 接入腾讯防水墙
    if (window.TencentCaptcha === undefined) {
      const URL = 'https://ssl.captcha.qq.com/TCaptcha.js'
      const scriptHeat = document.createElement('script')
      scriptHeat.type = 'text/javascript'
      scriptHeat.src = URL
      document.body.appendChild(scriptHeat)
      scriptHeat.onload = () => {
        // 用that获取组件的this
        const that = this
        /* eslint-disable no-new */
        // eslint-disable-next-line no-undef
        new TencentCaptcha(
          document.getElementById('TencentCaptchaBtn'),
          '2066570658',
          // 回调函数
          function (res) {
            // 获取到这两个字段后，加入loginForm中登录时传到后端
            // console.log(res.ticket)
            // console.log(res.randstr)
            that.loginFormData.ticket = res.ticket
            that.loginFormData.randstr = res.randstr
            // 开启登录按钮
            that.loginBtnDisableFlag = false
          }
        )
      }
    }
  }
}
</script>

<style lang="less" scoped>
/* #spanfooter{
  transform: translate(0% 5%);
} */
#spanfooter {
  position: relative;
  top: 25px;
}
#footer {
  text-align: center;
  background-color: #e3e3e3;
}
.el-form {
  margin-top: 10px;
}
.el-button {
  width: 100%;
}
.el-main {
  background-image: url("../assets/img/background.jpg");
  background-size: 100% 100%;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 610px;
}
#tabs {
  width: 410px;
}
#loginContain {
  position: relative;
  left: 960px;
  top: 140px;
  width: 450px;
  height: 355px;
}
.systemName {
  font-weight: bold;
  font-family: cursive;
  color: rgb(126, 141, 126);
  font-size: 38px;
  margin-left: 70px;
  position: relative;
  top: 5px;
}
</style>
